<template>
  <el-input
    class='search-input-box'
    :style='{
      maxWidth: maxWidth,
      height: height
    }'
    :placeholder="placeholder"
    size="medium"
    suffix-icon="el-icon-search"
    @change="handleChange"
    v-model.trim="inputValue">
  </el-input>
</template>

<script>
export default {
  components: {
  },
  data () {
    return {
      inputValue: ''
    }
  },
  props: {
    defaultValue: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    maxWidth: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '30px'
    }
  },
  methods: {
    handleChange () {
      this.$emit('change', this.inputValue)
    }
  },
  watch: {
    defaultValue () {
      this.inputValue = this.defaultValue
    }
  },
  created () {
    this.inputValue = this.defaultValue
  }
}
</script>

<style lang="stylus" scoped>
.search-input-box
  height 30px
  >>> .el-input__suffix
    right 0
    height 100%
    width 50px
  >>> .el-input__inner
    max-width 100%
    height 100%
    line-height 1
    font-size 12px
    padding-right 38px
    padding-left 10px
    &::-webkit-input-placeholder
      font-size 12px
      color #757575
  >>> .el-input__suffix
    width 38px
    .el-input__suffix-inner
      display block
      border-left 1px solid #e3e2e5
      line-height 1
      height 100%
      width 38px
      .el-input__icon.el-icon-search
        width 38px
        line-height 1
        text-align center
        &::before
          vertical-align middle
          font-size 16px
          font-weight 700
          color #b2aebc
</style>
